/* eslint-disable indent */
import React, { FC, useState, useEffect } from 'react';
import { tableConfig2 } from './config';
import styles from './styles.modules.less';
import _ from 'lodash';

interface dateListProps {
  date: string;
  week: string;
  isHoliday: boolean;
  isWorkday: boolean;
  eventList?: {
    id: number;
    eventName: string;
    needEventColor?: string;
  }[];
}

let o: any = {};

const CustomTable2: FC = () => {
  const [dateList, setDateList] = useState<dateListProps[]>([]);

  useEffect(() => {
    let arr: dateListProps[] = [];
    tableConfig2.forEach((item) => {
      const obj = { ...item };
      if (obj.stageList.length) {
        obj.stageList.forEach((val) => {
          if (val.dateList.length) {
            arr = _.uniqBy(arr.concat(val.dateList), 'date');
          }
        });
      }
    });
    setDateList(arr);

    document.addEventListener('mouseup', () => {
      console.log(123);
      document.onmousemove = null;
    });
  }, []);

  const fff = (date: dateListProps[]) => {
    let count = 0;
    for (let index = 0; index < dateList.length; index++) {
      const element = dateList[index];

      if (element.date === date[0].date) {
        return count;
      }
      if (element.isWorkday) {
        count++;
      }
    }
    return count;
  };

  const cuArr = (c) => {
    const arr: any = [];
    for (let index = 0; index < c; index++) {
      arr.push({});
    }
    return arr;
  };

  const onMouseDown = (e) => {
    let down_target = getElement(e.target);

    document.onmousemove = (move_e) => {
      let element = document.elementFromPoint(
        mousePosition(move_e).x,
        mousePosition(move_e).y
      );
      let n = getElement(element);

      if (down_target !== n && n !== down_target.moveElement) {
        if (!e.move_clientX) {
          if (e.clientX < move_e.clientX) {
            down_target.colSpan += 1;
          } else {
            down_target.colSpan -= 1;
          }
        } else if (e.move_clientX < move_e.clientX) {
          down_target.colSpan += 1;
        } else {
          down_target.colSpan -= 1;
        }

        down_target.moveElement = n;
        o = down_target;
      }
      e.move_clientX = move_e.clientX;

      return false;
    };
    return false;
  };

  console.log(o, 'oo');

  const getElement = (element) => {
    let n: any;
    if (element?.nodeName === 'SPAN') {
      n = element?.parentElement?.parentElement;
    } else if (element?.nodeName === 'DIV') {
      n = element?.parentElement;
    } else {
      n = element;
    }
    return n;
  };

  const mousePosition = (ev) => {
    let evs;

    if (!ev) evs = window.event;

    if (ev.pageX || ev.pageY) {
      return { x: ev.pageX, y: ev.pageY };
    }

    return {
      x:
        ev.clientX +
        document.documentElement.scrollLeft -
        document.body.clientLeft,

      y:
        ev.clientY +
        document.documentElement.scrollTop -
        document.body.clientTop,
    };
  };

  return (
    <table>
      <tbody>
        <tr>
          <td className={styles.td}></td>
          {dateList.map((item) => {
            return (
              item.isWorkday && (
                <td key={item.date} className={styles.td}>
                  {item.eventList?.map((v) => v.eventName)}
                </td>
              )
            );
          })}
        </tr>
        <tr>
          <td className={styles.td}></td>
          {dateList.map((item) => {
            return (
              item.isWorkday && (
                <td
                  key={item.date}
                  className={`${styles.td} ${styles.td_week}`}
                >
                  {item.week}
                </td>
              )
            );
          })}
        </tr>
        <tr>
          <td className={styles.td}>版本时间</td>
          {dateList.map((item) => {
            return (
              item.isWorkday && (
                <td
                  key={item.date}
                  style={{
                    background: item.eventList?.find((o) => o.needEventColor)
                      ?.needEventColor,
                  }}
                  className={`${styles.td}`}
                >
                  {item.date}
                </td>
              )
            );
          })}
        </tr>
        {tableConfig2.map((item) => {
          const stageList = [...item.stageList];
          let count = 0;

          return (
            <tr key={item.id}>
              <td className={styles.td}>{item.sprintName}</td>
              {stageList.map((v, k) => {
                if (k === 0 && v.dateList[0].date !== dateList[0]?.date) {
                  count += fff(v.dateList) + v.duration;
                  return React.cloneElement(
                    <>
                      {cuArr(fff(v.dateList)).map((item, key) => (
                        <td className={styles.td} key={key}></td>
                      ))}
                      <td colSpan={v.duration} className={styles.td}>
                        <div
                          style={{ background: v.color }}
                          className={styles.td_item_div}
                        >
                          {v.title}
                          <span
                            className={styles.td_item_div_span}
                            onMouseDown={onMouseDown}
                          ></span>
                        </div>
                      </td>
                    </>,
                    { key: k }
                  );
                }
                count += v.duration;
                return (
                  <td key={v.id} colSpan={v.duration} className={styles.td}>
                    <div
                      style={{ background: v.color }}
                      className={styles.td_item_div}
                    >
                      {v.title}
                      <span
                        className={styles.td_item_div_span}
                        onMouseDown={onMouseDown}
                      ></span>
                    </div>
                  </td>
                );
              })}

              {dateList.filter((o) => o.isWorkday).length > count
                ? cuArr(dateList.filter((o) => o.isWorkday).length - count).map(
                    (item, key) => <td className={styles.td} key={key}></td>
                  )
                : null}
            </tr>
          );
        })}
      </tbody>
    </table>
  );
};

export default CustomTable2;
